<template>
  <div class="login">
    <div class="select">
      <p class="title">请选择你的身份</p>
      <div :class="isSelect==1?'box selected':'box'" @click="selectHost(1)">我是主播 <i class="el-icon-arrow-right"></i></div>
      <div :class="isSelect==2?'box selected':'box'" @click="selectHost(2)">我是观众 <i class="el-icon-arrow-right"></i></div>
    </div>
    <div class="channel">
      <p class="title">请输入一个频道</p>
      <el-input v-model="channel" placeholder="输入一个频道"></el-input>
    </div>
    <div class="start">
      <el-button @click="onSubmit" style="width:150px" :disabled="!channel||!isSelect">开始</el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data(){
    return{
      channel:'',
      isSelect:'1',
    } 
  },
  created(){
    
  },
  mounted(){
  },
  methods: {
    selectHost(data){
      this.isSelect = data
    },
    onSubmit(){ 
      window.sessionStorage.setItem('token','sssss');
      this.$router.push({
        path:'main',
        query:{
          channel:this.channel,
          isSelect:this.isSelect
        }
      })
    },
  }
}
</script>
<style lang="scss">
.login{
  width: 375px;
  height: 667px;
  overflow: auto;
  overflow-x: hidden;
  margin: 0 auto;
  box-shadow: 14px 2px 10px 0px;
  background-image: linear-gradient(#0082fe,#07a9fc,#0ccafe);
  padding: 20px 20px 50px;
  .title{
    color: #fff;
    text-align: left;
  }
  .select{
    .box{
      width: 90%;
      height: 100px;
      background: #fff;
      margin: 10px auto;
      border-radius: 10px;
      text-align: center;
      line-height: 100px;
      cursor:pointer;
      border: 1px solid #fff;
      
    }
    .selected{
      border: 1px solid #000;
      font-size: 25px;
      color: #0082fe;
    }
  }
  .channel{
    margin-top:50px;
    text-align: center;
    .el-input{
      width: 90%;
      margin: 0 auto;
    }
  }
  .start{
    text-align:center;
    margin-top:50px;
  }
}
</style>
